<template>
  <div class="app-container">
    <div class="search-tab">
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="产液量" />
        <el-checkbox label="产油量" />
        <el-checkbox label="含水率" />
        <el-checkbox label="压力" />
        <el-checkbox label="油嘴/泵径" />
      </el-checkbox-group>
    </div>
    <div
      v-show="checkList.indexOf('产液量') != -1"
      id="产液量"
      style="width: 100%; height: 300px"
    />
    <div
      v-show="checkList.indexOf('产油量') != -1"
      id="产油量"
      style="width: 100%; height: 300px"
    />
    <div
      v-show="checkList.indexOf('含水率') != -1"
      id="含水率"
      style="width: 100%; height: 300px"
    />
    <div
      v-show="checkList.indexOf('压力') != -1"
      id="压力"
      style="width: 100%; height: 300px"
    />
    <div
      v-show="checkList.indexOf('油嘴/泵径') != -1"
      id="油嘴/泵径"
      style="width: 100%; height: 300px"
    />
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      fit
      stripe
      height="700"
      highlight-current-row
      element-loading-text="数据加载中"
    >
      <el-table-column
        prop="JH"
        label="井号"
        header-align="center"
        align="center"
        fixed
      />
      <el-table-column
        prop="RQ"
        label="日期"
        header-align="center"
        align="center"
        fixed
      />
      <el-table-column
        prop="CYDMC"
        label="采油队"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="QK"
        label="区块"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="CW"
        label="层位"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="CYFS"
        label="采油方式"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="SCSJ"
        label="生产时间"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="YZ"
        label="油嘴"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="BJ"
        label="泵径"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="CC"
        label="冲程"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="CS"
        label="冲次"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="YYSX"
        label="油压"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="TYSX"
        label="套压"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="HYSX"
        label="回压"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="RCYL1"
        label="日产液量"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="RCYL2"
        label="日产油量"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="RCQL"
        label="日产气量"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="HS"
        label="含水"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="HYHS"
        label="化验含水"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="ZDHHS"
        label="自动化含水"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="HS1"
        label="含砂"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="BS"
        label="泵深"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="DYM"
        label="动液面"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="CMD"
        label="沉没度"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="CCYND"
        label="采出液浓度"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="BK"
        label="泵况"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="LY"
        label="流压"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="JXQLSD"
        label="机械清蜡深度"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="HQYL"
        label="化清用量"
        header-align="center"
        align="center"
      />
    </el-table>
    <el-table-column
      prop="RLYWD"
      label="容蜡液温度"
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="CHEM_AGENT_USE_AMOU"
      label="加药用量"
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="YJMC"
      label="药剂名称"
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="GJYY"
      label="关井原因"
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="BZ"
      label="备注"
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="DWFXMC"
      label="分线"
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="CYJYZSJ"
      label="抽油机运转时间"
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="FDJLZH"
      label="计量站号"
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="KJZDNAME"
      label="工作制度"
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="LYFS"
      label="量油方式"
      header-align="center"
      align="center"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkList: ['产液量', '产油量', '含水率', '压力', '油嘴/泵径'],
      data1: [
        ['2021-09-23', 15.692083333333331],
        ['2021-09-24', 14.45083333333333],
        ['2021-09-25', 14.645416666666664],
        ['2021-09-26', 14.762499999999998],
        ['2021-09-27', 15.093333333333337]
      ],
      tableData: [{
        JH: '001',
        RQ: '2020/12/01',
        CYDMC: '001',
        QK: '001',
        CW: '001',
        CYFS: '001',
        SCSJ: '001',
        YZ: '001',
        BJ: '001',
        CC: '001',
        CS: '001',
        YYSX: '001',
        TYSX: '001',
        HYSX: '001',
        RCYL1: '001',
        RCYL2: '001',
        RCQL: '001',
        HS: '001',
        HYHS: '001',
        ZDHHS: '001',
        HS1: '001',
        BS: '001',
        DYM: '001',
        CMD: '001',
        CCYND: '001',
        BK: '001',
        LY: '001',
        JXQLSD: '001',
        HQYL: '001',
        RLYWD: '001',
        CHEM_AGENT_USE_AMOU: '001',
        YJMC: '001',
        GJYY: '001',
        BZ: '001',
        DWFXMC: '001',
        CYJYZSJ: '001',
        FDJLZH: '001',
        KJZDNAME: '001',
        LYFS: '001'
      }]
    }
  },
  computed: {},
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      this.checkList.forEach((item) => {
        const myChart = this.echarts.init(document.getElementById(item))
        const option = {
          title: {
            text: item,
            textStyle: {
              fontSize: 16
            },
            textAlign: 'center',
            left: '50%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          xAxis: {
            gridIndex: 0,
            min: '2021-09-23',
            max: '2021-09-27',
            type: 'time',
            splitLine: { show: true }
          },
          yAxis: { gridIndex: 0, min: 13, max: 17, type: 'value' },
          series: [
            {
              data: this.data1,
              type: 'line',
              smooth: true
            }
          ]
        }
        myChart.setOption(option)
        window.onresize = function() {
          myChart.resize()
        }
      })
    }
  }
}
</script>

<style scoped>
.search-tab{
  display: flex;
  justify-content:center;
  margin-bottom:20px;
}
</style>
